<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import { useRoute, useRouter } from 'vue-router'
import http from "../../http";
const router = useRouter()
const route = useRoute()
let userlist=ref([])
const getuserlist=()=>{
    http.get(`/app/user/`)
    .then(res=>{
        console.log(res)
        userlist.value = res.data
    })
}
// 点击新增
const adduser=()=>{
    router.push("/adduser")
}
// 时间搜索
let date_value = ref('')
let nick_name = ref('')
const search =()=>{
  http.get(`/app/user/?birth_date=${date_value.value}&nickname=${nick_name.value}`)
  .then(res=>{
    console.log(res)
    userlist.value = res.data
  }
)
}
// 点击编辑
// const edituser=(id)=>{

// }
onMounted(
    ()=>{
        getuserlist()
    }
)
</script>

<template>
<h2>全部用户</h2>
<div style="background-color: white;display: flex;">
          <div class="block">
            <div class="block">
            <span style="margin-right: 10px;">注册日期:</span>
            <el-input v-model="date_value" placeholder="2022-01-01" style="width: 200px;margin-right: 20px;"></el-input>
            </div>
          </div>
      <div style="margin-bottom: 20px;display: flex;">
        <el-input v-model="nick_name" placeholder="请输入昵称" style="width: 200px;height: 32px;font-size: 14px;margin-right: 20px;" />
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" style="margin-left: 20px" @click="adduser">新增</el-button>
      </div>
</div>

  <ul style="list-style-type: none;display:inline-flex;margin-left: -30px;">
      <li style="width: 262px;height: 280px;background-color: white;border: 1px solid #f5f6f9;margin-left: 20px;"
      v-for="item,key in userlist" :key="key" >
      <img :src = "item.avatar" style="width: 50px;height: 50px;margin-left: 20px;margin-top: 20px; border-radius: 50%;vertical-align: middle;">
      <span style="margin-left: 20px;font-size: 18px;display: inline;">{{ item.nickname }}</span>   
      <span style="display: inline;font-size: 13px;margin-left: 90px;display: flex;margin-top: -20px;"> ID:{{ item.user_id }}</span>
      <div style="margin-top: 20px;margin-left: 20px;font-size: 16px;">
      <div style="font-size: 14px;">真实姓名：{{ item.real_name }}</div>
      <div style="font-size: 14px;">手机号码：{{ item.phone }}</div>
      <div style="font-size: 14px;">身高：{{ item.height }}cm</div>
      <div style="font-size: 14px;">家庭住址：{{ item.address }}</div>
      <div style="font-size: 14px;">注册时间：{{ item.birth_date }}</div>
      </div>
      <div style="margin-top: 20px;margin-left: 20px;font-size: 16px;">
      <el-button type="success" @click="editRole">编辑</el-button>
      <el-button  @click="deleteRole(scope.row)">删除</el-button>
      </div>
  </li>
  </ul>

   
</template>

<style scoped>
ul li{
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 16px;
    box-shadow: rgb(242, 242, 242) 0px 0px 4px;
    font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    line-height: 24px;
}
ul li:hover{
  box-shadow: 0 8px 8px rgba(0,0,0,0.2); /* 鼠标悬停时的阴影效果 */
}
</style>